<template>
  <div class="admin-sidebar">
    <div class="sidebar-header">
      <h3>管理面板</h3>
    </div>

    <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        background-color="transparent"
        text-color="#fff"
        active-text-color="#00c3ff"
        @select="handleMenuSelect"
    >
      <el-menu-item index="dashboard">
        <el-icon><House /></el-icon>
        <span>仪表盘</span>
      </el-menu-item>
      <el-menu-item index="house-verification">
        <el-icon><DocumentChecked /></el-icon>
        <span>房源审核</span>
      </el-menu-item>
      <el-menu-item index="agent-verification">
        <el-icon><User /></el-icon>
        <span>中介审核</span>
      </el-menu-item>
      <el-menu-item index="user-management">
        <el-icon><UserFilled /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="system-settings">
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  House,
  DocumentChecked,
  User,
  UserFilled,
  Setting
} from '@element-plus/icons-vue'

const router = useRouter()
const props = defineProps({
  activeMenu: {
    type: String,
    default: 'dashboard'
  }
})

const handleMenuSelect = (index) => {
  // 根据菜单项跳转到相应页面
  switch (index) {
    case 'dashboard':
      router.push('/admin/dashboard')
      break
    case 'house-verification':
      router.push('/admin/house-verification')
      break
    case 'agent-verification':
      router.push('/admin/agent-verification')
      break
    case 'user-management':
      router.push('/admin/user-management')
      break
    case 'system-settings':
      router.push('/admin/system-settings')
      break
  }
}
</script>

<style scoped>
.admin-sidebar {
  width: 260px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  padding: 0;
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  margin: 20px 0 20px 20px;
  border-radius: 15px 0 0 15px;
}

.admin-sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sidebar-header {
  padding: 25px 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.sidebar-header h3 {
  color: #00c3ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

.el-menu-vertical {
  border: none !important;
  padding: 10px 0;
}

.el-menu-item {
  margin: 8px 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
  padding: 12px 16px;
  font-weight: 500;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background-color: rgba(0, 195, 255, 0.3) !important;
  color: #00c3ff !important;
  border-left: 4px solid #00c3ff;
}

.el-menu-item .el-icon {
  margin-right: 10px;
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .admin-sidebar {
    width: 200px;
    margin: 10px 0 10px 10px;
  }

  .sidebar-header h3 {
    font-size: 16px;
  }

  .el-menu-item {
    margin: 6px 10px;
    padding: 10px 12px;
  }
}

@media (max-width: 768px) {
  .admin-sidebar {
    width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: auto;
    max-height: none;
  }
}
</style>
